<template>
  <a-row id="globalHeader" align="center":wrap="false">
    <a-col flex="auto">
      <a-menu mode="horizontal":selected-keys="selectedKeys"@menu-item-click="doMenuClick">
        <a-menu-item key=" " :style="{ padding: 0, marginRight: '38px' }">
          <div class="title-bar">
            <img class="logo2" src="../assets/logo.png" />
            <div class="title">ZJHUOJ</div>
          </div>
        </a-menu-item>
        <a-menu-item v-for="item in visibleRoutes" :key="item.path" style="font-size: 16px; ">
          {{ item.name }}
        </a-menu-item>
      </a-menu>
    </a-col>
    <a-col flex="150px" style="display: flex; align-items: center; justify-content: center">
      <a-dropdown @select="" :popup-max-height="false">
        <a-button style="background-color: white" >
          <a-space size="large">
            <a-avatar :imageUrl="userAvatar" :key="userAvatarKey"></a-avatar>
          </a-space>
        </a-button>
        <template #content>
          <a-doption @click="$router.push('/modify')">账号设置</a-doption>
          <a-doption @click="ExitAccount">退出登入</a-doption>
        </template>
      </a-dropdown>
    </a-col>
  </a-row>
</template>

<script setup lang="ts">
import { routes } from "../router/routes";
import { useRouter } from "vue-router";
import { computed, ref } from "vue";
import { useStore } from "vuex";
import checkAccess from "@/access/checkAccess";
import ACCESS_ENUM from "@/access/accessEnum";

const router = useRouter();
const store = useStore();

// 展示在菜单的路由数组
const visibleRoutes = computed(() => {
  return routes.filter((item) => {
    if (
      // 动态，且store应该塞函数里面
      !checkAccess(store.state.user.user, item?.meta?.access as string) ||
      item?.meta?.access === ACCESS_ENUM.SIGNING ||
      item?.meta?.access === ACCESS_ENUM.HIDDEN
    ) {
      return false;
    }
    return true;
  });
});

// 用户头像的计算属性
const userAvatarKey = ref(0); // 强制跟新
const userAvatar = computed(() => {
  if (store.state.user.user.email === "")
    return "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9123.png~tplv-uwbnlip3yd-webp.webp";
  else {
    userAvatarKey.value += 1;
    return `https://q1.qlogo.cn/g?b=qq&nk=${store.state.user.user.email}&s=5`;
  }
});

// 默认主页
const selectedKeys = ref(["/"]);

// 路由跳转后更新菜单栏高亮状态
router.afterEach((to) => {
  selectedKeys.value = [to.path];
});

// 点击按钮后执行下面程序跳转
const doMenuClick = (key: string) => {
  router.push({
    path: key,
  });
};

// 退出账号
const ExitAccount = () => {
  store.dispatch("user/getLoginUser", {
    permission: "0",
    username: "未登录",
    name: "",
    password: "",
    signature: "",
    email: "",
    avatar: "",
    status: "noLogin",
  });
  localStorage.clear();
  router.push("/login");
};

</script>

<style scoped>
.title-bar {
  display: flex;
  align-items: center;
}

.title {
  color: #000000;
  margin-left: 16px;
}

.logo2 {
  height: 48px;
}

/* .arco-dropdown-open .arco-icon-down {
  transform: rotate(180deg);
} */
</style>
